<template>
  <div
    class="min-h-screen bg-gradient-to-tr from-indigo-50 via-pink-50 to-yellow-50 p-6"
  >
    <div class="max-w-6x2 mx-auto space-y-8">
      <!-- 💻 标题卡片 -->
      <el-card
        class="rounded-2xl shadow-lg transition-all duration-300 hover:shadow-2xl"
      >
        <template #header>
          <div
            class="flex items-center justify-center text-3xl font-extrabold text-blue-600"
          >
            💻 清风漫笔后台管理
          </div>
        </template>
        <div
          class="flex justify-center mb-2 text-base text-blue-500 hover:underline hover:text-blue-700 transition"
        >
          🔗
          <a href="https://gitee.com/silent-moment" target="_blank" class="ml-1"
            >源码链接：https://gitee.com/silent-moment</a
          >
        </div>
        <p class="text-gray-700 text-lg leading-relaxed px-4 py-2">
          一个基于
          <strong>Vue3 + TypeScript + Spring Boot</strong> 的博客管理后台，支持
          ✍️ 文章、📂 分类、🏷 标签、📚 知识库、👤 简历、🛠
          站点信息等多个模块。<br />
          配合响应式布局 📱 与细粒度权限控制 🔐，助力高效博客内容管理 🚀。
        </p>
      </el-card>

      <!-- 🧩 模块介绍卡片 -->
      <el-card
        class="rounded-2xl shadow-md transition-all duration-300 hover:shadow-2xl"
      >
        <template #header>
          <div class="text-xl font-semibold text-purple-600 flex items-center">
            🧩 <IconifyIconOffline icon="mdi:view-dashboard" class="mx-2" />
            系统模块介绍
          </div>
        </template>
        <div
          class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 text-gray-800 px-2 py-2"
        >
          <div
            v-for="item in modules"
            :key="item.label"
            class="flex items-start p-4 bg-white rounded-xl shadow-sm hover:shadow-md transform hover:scale-105 transition duration-300"
          >
            <IconifyIconOffline
              :icon="item.icon"
              class="text-2xl text-blue-500 mr-3 mt-1"
            />
            <div>
              <div class="font-medium">{{ item.label }}</div>
              <div class="text-sm text-gray-500">{{ item.desc }}</div>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 🛠 技术栈卡片 -->
      <el-card
        class="rounded-2xl shadow-md transition-all duration-300 hover:shadow-2xl"
      >
        <template #header>
          <div class="text-xl font-semibold text-green-600 flex items-center">
            🛠 <IconifyIconOffline icon="mdi:tools" class="mx-2" />
            技术栈
          </div>
        </template>
        <ul
          class="grid grid-cols-1 sm:grid-cols-2 gap-y-2 text-gray-700 list-inside list-disc text-base px-4 py-2"
        >
          <li class="hover:underline hover:text-green-600 transition">
            💡 前端：Vue3、TypeScript、Vite、Element Plus、Pure Admin Thin
          </li>
          <li class="hover:underline hover:text-green-600 transition">
            🧱 后端：Spring Boot、MyBatis Plus、Knife4j、Druid
          </li>
          <li class="hover:underline hover:text-green-600 transition">
            🗄 数据库：MySQL
          </li>
          <li class="hover:underline hover:text-green-600 transition">
            🧊 文件存储：MinIO
          </li>
          <li class="hover:underline hover:text-green-600 transition">
            🔐 权限控制：细粒度菜单 & 接口鉴权
          </li>
        </ul>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: "Welcome" });

const modules = [
  {
    label: "✍️ 文章管理",
    desc: "发布 / 编辑 / 删除博客文章",
    icon: "mdi:file-document-edit-outline"
  },
  {
    label: "📂 分类管理",
    desc: "组织文章结构，分门别类",
    icon: "mdi:folder-outline"
  },
  {
    label: "🏷 标签管理",
    desc: "关键词快速归类文章内容",
    icon: "mdi:tag-outline"
  },
  {
    label: "📚 知识库",
    desc: "结构化文档 / Markdown 管理",
    icon: "mdi:book-open-outline"
  },
  {
    label: "🛠 站点信息",
    desc: "站点个性化配置与展示",
    icon: "mdi:cog-outline"
  },
  {
    label: "👤 简历模块",
    desc: "维护个人信息和求职意向",
    icon: "mdi:account-card-outline"
  }
];
</script>
